<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>用户评价</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .head{overflow: hidden;line-height: 50px;border-top: 4px solid #eeedf3;}
        .head .item{float: left;width: 33.3333%;text-align: center;font-size: 14px;}
        .head .item span{color: #ffc10c;margin-right: 4px;}
        .head .item em{font-size: 12px;background-color: #ffc10c;color: #fff;padding: 4px;border-radius: 3px;}
        .s-head{line-height: 50px;border-top: 4px solid #eeedf3;position: relative;}
        .s-head .item{float: left;width: 33.3333%;text-align: center;font-size: 14px;}
        .s-head .b-border{clear: both;width: 33.3333%;height: 4px;background-color: #ffc10c;}
        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}

        .s-con{}
        .s-con ul{}
        .s-con ul li{display: -webkit-box;display: box;padding: 12px;position: relative;}
        .s-con ul li .left{width: 60px;height: 60px;border-radius: 60px;background-size: cover;background-position: center;background-repeat: no-repeat;}

        .s-con ul li .right{box-flex: 1;-webkit-box-flex: 1;margin-left: 12px;}
        .s-con ul li .right .name{font-size: 14px;}
        .s-con ul li .right .evaluate{margin-top: 8px;color: #333;font-size: 14px;}
        .s-con ul li .right .evaluate p{color: #333;margin-bottom: 5px;}
        .s-con ul li .right .evaluate div{line-height: 20px;}
        .s-con ul li .right .evaluate em{display: block;font-size: 12px;text-align: right;margin-top: 5px;}

        .good,.bad{display: none;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">用户评价</div>
        </div>
    </header>
    <div class="content">
        <div class="head">
            <div class="item">完成质量<span>5</span><em>高</em></div>
            <div class="item">工作速度<span>5</span><em>高</em></div>
            <div class="item">服务态度<span>5</span><em>高</em></div>
        </div>
        <div class="s-head bottom-line">
            <div class="item">好评(<span>15</span>)</div>
            <div class="item">中评(<span>10</span>)</div>
            <div class="item">差评(<span>0</span>)</div>
            <div class="b-border"></div>
        </div>
        <div>
            <div class="s-con better">
                <ul>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="s-con good">
                <ul>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="s-con bad">
                <ul>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                        <div class="right">
                            <div class="name">
                                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                                <span class="sex"><i class="iconfont icon-women"></i></span>
                                <span class="star"><i class="iconfont icon-star2"></i></span>
                            </div>
                            <div class="evaluate">
                                <div>评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</div>
                                <em>2016.06.12</em>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    $('.s-head .item').click(function(){
        var _index = $(this).index();
        var _left = _index*33.3333+'%';
        $('.b-border').animate({marginLeft:_left});
        $('.s-con').eq(_index).fadeIn().siblings().hide();
    })
</script>
</html>